<template>
    <div class="discovery">
        <template>
            <el-carousel :interval="4000" type="card" height="200px">
                <el-carousel-item v-for="(banner,index) in bannerList" :key="index">
                    <img :src="banner.imageUrl" alt="">
                </el-carousel-item>
            </el-carousel>
        </template>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                bannerList: [],
            }
        },
        methods: {

        },
        created () {
            var $this = this;
            // 为给定 ID 的 user 创建请求
            this.$http.get('https://autumnfish.cn/banner', {
                params: {
                    type: 0
                }
            })
            .then(function (response) {
                $this.bannerList = response.data.banners;
            })
            .catch(function (error) {
                console.log(error);
            });
        },
    }
</script>

<style scoped>
    .discovery{
        width: 1100px;
        margin: 0 auto;
    }

    .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 200px;
        margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }

  .el-carousel__mask image{
      width: 100%;
  }
</style>